{% load i18n %}
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MRC编程</title>
    <link rel="icon" href="{% static 'img/mrc_logo.png' %}" type="img/x-ico" />
    <meta name="viewport" content="witdth=device-width,user-scalab=no,initial-scalab=1.0,maximum-scalab=1.0,minimum-sacale=1.0">
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/bootstrapValidator.min.css' %}">

    <style type="text/css">
        .container{
            margin-top: 10%;
        }
    </style>
</head>
<body>
<div class="container">
    <div style="text-align: center;margin-bottom: 5%">
        <img src="{% static 'img/mrc_logo.png' %}" alt="mrc logo" style="display: block;margin: 0 auto">
        <strong>{% trans 'MRC Block programming' %}</strong>
    </div>
    <div class="row vertical-offset-100">
        <div class="col-md-4 col-md-offset-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">{% trans 'Please sign up' %}</h3>
                </div>
                <div class="panel-body">
                    {% if is_success %}
                        {% if message %}
                            <div class="alert alert-success" role="alert"><strong>{% trans 'tip' %}:</strong>{{ message }}</div>
                        {% endif %}
                    {% else %}
                        {% if message %}
                            <div class="alert alert-danger" role="alert"><strong>{% trans 'tip' %}:</strong>{{ message }}</div>
                        {% endif %}
                    {% endif %}
                    <div class="alert alert-danger" role="alert" id="code_tip" style="display: none"></div>
                    <form accept-charset="UTF-8" role="form" id="form-sign-up" method="post">
                        {% csrf_token %}
                        <fieldset>
                            <div class="form-group has-feedback">
                                <label for="username">{% trans 'username' %}:</label>
                                <span class="glyphicon glyphicon-user form-control-feedback"></span>
                                <input type="text" class="form-control" placeholder="{% trans 'username' %}" name="username" id="username">
                            </div>
                            <div class="form-group has-feedback">
                                <label for="phone">{% trans 'phone' %}:</label>
                                <span class="glyphicon glyphicon-phone form-control-feedback"></span>
                                <input type="text" class="form-control" placeholder="{% trans 'phone' %}" name="phone" id="phone">
                            </div>
                            <div class="form-group has-feedback">
                                <label for="password_1">{% trans 'new password' %}:</label>
                                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                                <input type="password" class="form-control" placeholder="{% trans 'new password' %}" name="password_1" id="password_1">
                            </div>
                            <div class="form-group has-feedback">
                                <label for="password_2">{% trans 're-enter password' %}:</label>
                                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                                <input type="password" class="form-control" placeholder="{% trans 're-enter password' %}" name="password_2" id="password_2">
                            </div>
                            <div class="form-group">
                                <label for="code">{% trans 'SMS verification code' %}:</label>
                                <div class="row">
                                    <div class="col-md-6">
                                        <input type="text" class="form-control fc-clear" placeholder="{% trans 'Please enter SMS verification code' %}" name="code" id="code"/>
                                    </div>
                                    <div class="col-md-6">
                                        <button class="btn btn-primary" type="button" id="get_code">{% trans 'send SMS verification code' %}</button>
                                    </div>
                                </div>
                            </div>
                            <input class="btn btn-lg btn-success btn-block" type="submit" value="{% trans 'sign up' %}" id="sign-up">
                        </fieldset>
                    </form>
                </div>
                <div class="panel-footer text-right">
                    <label>
                        <a href="{% url 'mrc:forget_password' %}">{% trans 'forget password' %}</a>
                        <span>/</span>
                        <a href="{% url 'mrc:login' %}">{% trans 'sign in' %}</a>
                    </label>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/jsi18n"></script>
<script type="application/javascript" src="{% static 'js/jquery.min.js' %}"></script>
<script type="application/javascript" src="{% static 'js/bootstrap.min.js' %}"></script>
<script type="application/javascript" src="{% static 'js/bootstrapValidator.min.js' %}"></script>
<script type="application/javascript" src="{% static 'js/sign_up_form_validator_cn.js' %}"></script>
<script type="application/javascript">
    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    var csrftoken = getCookie('csrftoken');
    {% if is_success %}
        setTimeout(function () {
            window.location.href="{% url 'mrc:login' %}"
        },5*1000);
    {% endif %}

    $(document).ready(function () {
        window.code_contral=null;
        $("#get_code").click(function (e) {
            $("#code_tip").css("display","none");
            $("#form-sign-up").data('bootstrapValidator').validateField('phone');

            var small_list=$("#phone").siblings("small");
            var phone_is_error=false;
            for(var i=0;i<small_list.length;i++){
                var display=$(small_list[i]).css("display");
                if(display=="block"){
                    phone_is_error=true;
                    break;
                }
            }
            var number=5*60;
            var phone=$("#phone").val();
            if(phone_is_error==false){
                var get_code_result=false;
                $.ajax({
                    url: '{% url "mrc:get_sms_code" %}',
                    type: "Post",
                    async: false,
                    data: {"phone":phone,"csrfmiddlewaretoken":csrftoken},
                    dataType: "json",
                    success: function(data){
                        get_code_result=data["is_success"];
                        var message=data["message"];
                        if(get_code_result==false){
                            $("#code_tip").text(message);
                            $("#code_tip").css("display","block");
                        }

                    },
                    error: function(){
                        $("#code_tip").text("{% trans 'Get SMS verification code, network error!' %}");
                        $("#code_tip").css("display","block");
                    },
                });
                if(get_code_result==false){
                    return
                }
                window.code_contral=setInterval(function () {
                    if(number==0){
                        clearInterval(window.code_contral);
                        $("#get_code").text("{% trans 'send SMS verification code' %}");
                        $("#get_code").removeAttr("disabled");
                        $("#code_tip").css("display","none");
                        number=5*60;
                    }else{
                        $("#get_code").text("{% trans 'SMS sent' %} "+number+"s");
                        $("#get_code").attr("disabled","disabled");
                        number=number-1;
                    }
                },1000)
            }
        });
    })
</script>
</body>
</html>